<template>
	<div class="login">
		<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
			<h3 class="title">Howe科技小程序后台管理系统</h3>
			<el-form-item prop="username">
				<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
					<template #prefix>
						<user style="width: 1em; height: 1em; margin-right: 8px" />
					</template>
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
					@keyup.enter="handleLogin">
					<template #prefix>
						<edit style="width: 1em; height: 1em; margin-right: 8px" />
					</template>
				</el-input>
			</el-form-item>

			<el-checkbox style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
			<el-form-item style="width:100%;">
				<el-button :loading="loading" size="large" type="primary" style="width:100%;"
					@click.prevent="handleLogin">
					<span v-if="!loading">登 录</span>
					<span v-else>登 录 中...</span>
				</el-button>
			</el-form-item>
		</el-form>
		<!--  底部  -->
		<div class="el-login-footer">
			<span>Copyright © 2022 xiaoxihao.</span>
		</div>
	</div>
</template>
<script>
	const {ElMessage} = require("element-plus");
	export default {
		data() {
			return {
				loading: false,
				loginForm: {
					username: '',
					password: ''
				},
				loginRules: {
					username: [{
						required: true,
						message: "请输入用户名",
						trigger: "blur"
					}, ],
					password: [{
						required: true,
						message: "请输入密码",
						trigger: "blur"
					}],
				},
			}
		},
		
		created() {
			sessionStorage.clear()
		},
		
		methods:{
			handleLogin(){
				this.$refs.loginRef.validate(vaild=>{
					if(vaild){
						
						this.$http.post("/login/formlogin",this.loginForm)
						.then((res)=>{
							this.loading=true
							console.log(res)
							if(res.data.code == '200'){
								if(res.data.data.user.roleId == '1'){
									if(res.data.data.user.status == '1'){
										ElMessage({message: "登录成功",type: "success",});
										window.sessionStorage.setItem("user", JSON.stringify(res.data.data.user));
										window.sessionStorage.setItem("token", res.data.data.token);
										this.$router.replace({path: "/home"});
									}else{
										ElMessage({message: "登录失败，账号状态异常",type: "error",});
									}
								}else{
									ElMessage({message: "登录失败，账号无权限",type: "error",});
								}
								this.loading=false
							}else{
								ElMessage({message: "账号或密码错误",type: "error",});
								this.loading=false
							}
						})
						
					}
				
				})
					

				
			}
		}
	}
	
</script>

<style>
	.login {
		margin-top: -10px;
		margin-left: -10px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		position : absolute;
		background-image: url("../assets/image/login-background.jpg");
		background-size: contain;
	}

	.title {
		margin: 0px auto 30px auto;
		text-align: center;
		color: #707070;
	}

	.login-form {
		border-radius: 6px;
		background: #ffffff;
		width: 400px;
		padding: 25px 25px 5px 25px;

		.el-input {
			height: 40px;

			input {
				height: 40px;
			}
		}

		.input-icon {
			height: 39px;
			width: 14px;
			margin-left: 0px;
		}
	}

	.login-tip {
		font-size: 13px;
		text-align: center;
		color: #bfbfbf;
	}


	

	.el-login-footer {
		height: 40px;
		line-height: 40px;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		color: #fff;
		font-family: Arial;
		font-size: 12px;
		letter-spacing: 1px;
	}


</style>
